<template>
  <div
    class="mark-box"
	
    v-show="show"
    @click="closePopup"
    @touchmove.stop.prevent="emptyFn"
  >
    <div class="container" :class="flagShow ? 'fadeIn' : 'fadeOut'">
      <template v-if="position == 'normal'">
        <slot v-if="flagShow"></slot>
      </template>
      <template v-if="position == 'bottom'">
        <div
          class="bottom-content"
          @touchstart="touchstartComment"
          @touchmove="touchmoveComment"
          @touchend="touchendComment"
          @click.stop="emptyFn"
          :style="'height:calc(100vh - '+blockTop+'px);transform: translateY(' + moveY + 'px)'
          "
          :animation="animationData"
        >
          <img
            v-if="closeBtn"
            @click.stop="closePopup"
            class="close"
            src="https://oss-prod.xtrip.vip/common/20230829j7SE2K.png"
            alt=""
          />
          <slot v-if="flagShow"></slot>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import toolUtils from "@/utils/toolUtils.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: "normal",
    },
    height: {
      type: String,
      default: "91%",
    },
    closeBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      timer: null,
      flagShow: false,
      startY: 0,
      moveY: null,
      animationData: {},
	  blockTop:0,
	  custom:null,
	  navTop:0
    };
  },
  created() {
  	let custom = wx.getMenuButtonBoundingClientRect()
  	this.custom = custom
  	// this.navWidth = custom.width + 10 + 
  	this.navTop = parseInt(custom.top - parseInt(Math.abs(34 - custom.height) / 2))
  	this.blockTop = this.navTop + custom.height + 5
  },
  watch: {
    show: {
      handler(val) {
		console.log(val)
        if (val) {
          this.flagShow = true;
          this.showPopup()
          // this.moveY = 0;
        }
      },
      immediate: true,
    },
  },
  methods: {
    touchstartComment(e) {
      console.log(e, "sssssssss");
      this.startY = e.touches[0].clientY;
    },

    touchmoveComment(e) {
      this.moveY = e.touches[0].clientY - this.startY;
      console.log(this.moveY, "==============");
    },
    touchendComment(e) {
		console.log(this.moveY ,'changechangechange')
      if (this.moveY > 50) {
        this.flagShow = false;
        var animation = uni.createAnimation({
          duration: 350,
          timingFunction: 'ease',
        })
        this.animation = animation
        animation.translateY('100%').step()
        this.animationData = animation.export()
		this.moveY = null
        setTimeout(()=> {
          this.$emit("close");
		  
        }, 200)
      } else {
		this.moveY = 0
      }
    },
    emptyFn() {
      return false;
    },
    showPopup() {
	 
      var animation = uni.createAnimation({
        duration: 350,
        timingFunction: 'ease',
      })
      this.animation = animation
	 
      // this.animationData = animation.export()
      setTimeout(()=> {
		  animation.translateY(0).step()
		  this.animationData = animation.export()
		  console.log(this.moveY)
		  
      }, 0)
	  this.$emit("slideUp");
    },
    
    closePopup() {
      this.flagShow = false;
      var animation = uni.createAnimation({
        duration: 350,
        timingFunction: 'ease',
      })
      this.animation = animation
      animation.translateY('100%').step()
      this.animationData = animation.export()
      setTimeout(()=> {
        this.$emit("close");
      }, 400)
    },
  },
};
</script>
<style lang="scss" scoped>
.mark-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10000;
}

.container {
  width: 100%;
  height: 100%;
}

.fadeIn {
  animation: fadeIn .5s ease forwards;
}

.fadeOut {
  animation: fadeOut 0.5s ease forwards;
}

.slideUp {
  animation: slideUp 0.35s ease forwards;
}

.slideDown {
  animation: slideDown 0.35s ease forwards;
}

.bottom-content {
	
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 50rpx 50rpx 0px 0px;
  transform: translateY(100%);
  .close {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 100rpx;
    height: 100rpx;
    z-index: 99999;
    padding:35rpx ; 
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
</style>